<template>
    <div class="percentage-layout">
        <div class="info-back">
            <el-row :gutter="16">
                <el-col :span="13" class="btns">
                    <router-link to='/percentage'>
                        <div class="back-icon">
                            <i class="fa fa-arrow-left" aria-hidden="true"></i>
                        </div>
                    </router-link>
                </el-col>
                <el-col :span="11" class="btns">
                    <div class="grid-content btns">
                        <router-link to='/toEmployeeSet'>
                            <el-button class="red-btn"> 新 增 </el-button>
                        </router-link>
                        <el-button class="gray-btn" @click="del"> 删 除 </el-button>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="employee" v-loading="fullscreenLoading">
            <div class="employee-con" v-for="(item, index) in items">
                <div class="card-01 result" @dblclick="handler(item)" @click="changeStatus(index,list[index],item)">
                    <el-row :gutter="20">
                        <el-col :span="1">
                            <!--<div class="grid-content pd">-->
                            <!--<input :type="isMultiselect ? 'checkbox' : 'radio'" :id="'input-' + index"-->
                            <!--class="regular-input"/>-->
                            <!--</div>-->
                            <div class="check-item card-row">
                                <el-checkbox v-model="list[index]"></el-checkbox>
                            </div>
                        </el-col>
                        <el-col :span="3">
                            <div class="grid-content pd">
                                <img src="../../../../static/img/member.png">
                            </div>
                        </el-col>
                        <el-col :span="15">
                            <div class="grid-content text">
                                <h6>{{item.ownerName}}</h6>
                                <span>百分比</span>
                                <i>|</i>
                                <span><span class="member-price">{{item.prizeValue}}</span>%</span>
                                <p class="l2">{{item.createTime}}</p>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>

    </div>

</template>

<script>
    export default {
        name: 'keepalive-false',
        data: function () {
            return {
                fullscreenLoading: true,
                items: [],
                activeName: 'first',
                name: '',
                value: true,
                currentDate: new Date(),
                classItem: [],
                list: [],
            }
        },
        created: function () {
            this.$$("#content").scrollTop(0)
//            http://192.168.1.136:8081/shop/user/prize/?states=0,1&_search=false&nd=1493281059439&rows=20&page=1&sidx=id&sord=desc&_=1493281034190
            let self = this;
            this.$axioxs.get("/user/prize/?states=1&_search=false&nd=1493281059439&rows=20&page=1&sidx=id&sord=desc&_=1493281034190")
                .then(function (res) {
                        console.log(JSON.stringify(res.data));

                        self.items = res.data.records;
                        self.items.forEach(item => {
                            item.prizeValue = item.prizeValue*100
                        });
                        self.fullscreenLoading = false;
                        console.log(self.items)
                    },
                    (res) => {
                        this.$message({
                            showClose: true,
                            type: 'error',
                            message: res
                        });
                    });
        },
        methods: {
            handler: function (item) {
                this.$router.push({
                    name: '',
                    path: '/toEmployeeSet',
                    query: {formMember: item}
                });
            },
            changeStatus(index, isSelected, item){
                if (isSelected == true) {
                    this.$set(this.list, index, false);
                    let self = this;
                    var arr = [];
                    for (var i = 0; i < self.classItem.length; i++) {
                        if (item != self.classItem[i]) {
                            arr.push(self.classItem[i]);
                        }
                    }
                    this.classItem = arr;
                } else {
                    this.$set(this.list, index, true);
                    this.classItem.push(item);
                }
            },
            del(){
//                http://192.168.1.136:8081/shop/user/prize/a985bd76-eb7d-41f6-ab33-fb672acf6020
                let self = this;
                this.classItem.forEach(item => {
                    self.$axioxs.delete("/user/prize/" + item.id)
                        .then(function () {
                                self.$set(self.list, self.items.indexOf(item), false);
                                self.items.splice(self.items.indexOf(item), 1)
                            },
                            (res) => {
                                self.$message({
                                    showClose: true,
                                    type: 'error',
                                    message: res
                                });
                            })
                });
            }
        }
    }
</script>

<style scoped>
    .el-tabs__item {
        width: auto;
        text-align: center;
    }

    .el-dropdown-link {
        float: right;
    }

    .second {
        height: 40px;
        line-height: 40px;
        border-top: 0.5px solid #cacaca;
        border-right: 0.5px solid #cacaca;
    }

    #item {
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        font-size: 1.2em;
        color: rgb(0, 158, 107);
    }
</style>